<template>
  <div>
    <!-- 卡片 -->
    <Row :gutter="47">
      <Col span="8">
      <div class="card-sty" @click="cusMet('/wallet')">
        <div class="title">{{ $t('promote.card_tit_balance') }}</div>
        <div class="sub-title">
          {{ $t('promote.card_sub_tit_balance') }}
          <Tooltip placement="top" transfer max-width="260">
            <Icon type="ios-help-circle-outline" size="20" color="#767B93" class="tip-icon" />
            <div slot="content" class="tip-text">{{ $t('promote.card_sub_tit_balance_tip') }}</div>
          </Tooltip>
        </div>
        <div class="balance-num">{{ allData.availableCommissionBalance || 0 }} <span>{{ userCurrency }}</span></div>
        <div class="sub-title">
          {{ $t('promote.card_third_tit_balance') }}
          <Tooltip placement="top" transfer max-width="260">
            <Icon type="ios-help-circle-outline" size="20" color="#767B93" class="tip-icon" />
            <div slot="content">{{ $t('promote.card_third_tit_balance_tip') }}</div>
          </Tooltip>
        </div>
        <div class="un-wd-num">{{ allData.unsettleCommissionBalance || 0 }} <span>{{ userCurrency }}</span></div>
        <div class="wd-btn" @click="wdMet()">{{ $t('routerTitle.withdraw') }}</div>
      </div>
      </Col>
      <Col span="8">
      <div class="card-sty" v-if="defaultShowCard" @click="cusMet('/invite-user')">
        <div class="title head-title">
          {{ $t('promote.default_tit_card') }}
          <span class="invite-num">{{ allData.last7DaysInvitesCount }}</span>
        </div>
        <div class="sub-title">{{ $t('promote.default_sub_tit_card') }}</div>
        <div class="un-wd-num bd-sty">{{ allData.dailyAverageForInvites }}</div>
        <!-- allData.last7DaysInvitesList 近七天邀请注册用户数据集 -->
        <bar-com class="bar-area" :data="resignSevDayData" :categoryData="resignCategoryData" id="indexId"></bar-com>
      </div>
      <div class="empty-card" v-else @mouseenter="defaultRight = true" @mouseleave="defaultRight = false">
        <div>
          <img src="@/assets/images/alliance/people.png" class="empty-img" alt="">
          <div class="empty-desc">{{ $t('promote.default_empty_desc') }}</div>
          <transition name="fade">
            <Icon type="md-arrow-forward" class="right-icon" v-if="defaultRight" @click="cusMet('/invite-user')"
              color="#FFFFFF" />
          </transition>
        </div>
      </div>
      </Col>
      <Col span="8">
      <div class="card-sty" v-if="pinkShowCard" @click="cusMet('/invite-user')">
        <div class="title head-title">
          {{ $t('promote.pink_tit_card') }}
          <span class="active-num">{{ allData.last7DaysActivatedCount }}</span>
        </div>
        <div class="sub-title">{{ $t('promote.default_sub_tit_card') }}</div>
        <div class="un-wd-num bd-sty">{{ allData.dailyAverageForActivated }}</div>
        <!-- allData.last7DaysActivatedList 近七天邀请激活用户数据集 -->
        <bar-com class="bar-area" :data="activeSevDayData" :categoryData="activeCategoryData"
          id="indexActiveId"></bar-com>
      </div>
      <div class="empty-card pink-card" v-else @mouseenter="pinkRight = true" @mouseleave="pinkRight = false">
        <div>
          <img src="@/assets/images/alliance/hand.png" class="empty-img" alt="">
          <div class="empty-desc">{{ $t('promote.pink_empty_desc') }}</div>
          <transition name="fade">
            <Icon type="md-arrow-forward" class="right-icon" v-if="pinkRight" @click="cusMet('/invite-user')"
              color="#FFFFFF" />
          </transition>
        </div>
      </div>
      </Col>
    </Row>
    <!-- 卡片 -->
    <Row :gutter="47">
      <Col span="8">
      <div class="card-sty" v-if="grayShowCard" @click="cusMet('/Freight-Brokerage')">
        <div class="title">
          {{ $t('personal.ShippingFees') }}
        </div>
        <div class="sub-title sub-head">
          {{ $t('promote.gray_sub_tit_card') }}
          <span class="date-text" v-if="allData && allData.expressIncomeInfo">
            {{ allData.expressIncomeInfo.incomeTimeStr || '' }}
          </span>
        </div>
        <div class="com-num" v-if="allData && allData.expressIncomeInfo">
          {{ allData.expressIncomeInfo.incomeAmount || 0 }}
          <span>{{ userCurrency }}</span>
        </div>
        <div class="sub-title sub-head" style="margin-top: 32px;">
          {{ $t('promote.gray_third_tit_card') }}
        </div>
        <div class="com-num" v-if="allData && allData.expressIncomeInfo">
          {{ allData.expressIncomeInfo.totalIncomeCount || 0 }}
        </div>
      </div>
      <div class="empty-card gray-card" v-else @mouseenter="grayRight = true" @mouseleave="grayRight = false">
        <div>
          <img src="@/assets/images/alliance/car.png" class="empty-img" alt="">
          <div class="empty-desc">{{ $t('promote.gray_empty_desc') }}</div>
          <transition name="fade">
            <Icon type="md-arrow-forward" class="right-icon" v-if="grayRight" @click="cusMet('/Freight-Brokerage')"
              color="#FFFFFF" />
          </transition>
        </div>
      </div>
      </Col>
      <Col span="8">
      <div class="card-sty" v-if="blueShowCard" @click="cusMet('/Product-Commission')">
        <div class="title">
          {{ $t('promote.product_banner_tit1') }}
        </div>
        <div class="sub-title sub-head">
          {{ $t('promote.gray_sub_tit_card') }}
          <span class="date-text" v-if="allData && allData.goodsIncomeInfo">
            {{ allData.goodsIncomeInfo.incomeTimeStr || '' }}
          </span>
        </div>
        <div class="com-num" v-if="allData && allData.goodsIncomeInfo" style="color: #0DA0F3;">
          {{ allData.goodsIncomeInfo.incomeAmount || 0 }}
          <span>{{ userCurrency }}</span>
        </div>
        <div class="sub-title sub-head" style="margin-top: 32px;">
          {{ $t('promote.gray_third_tit_card') }}
        </div>
        <div class="com-num" v-if="allData && allData.goodsIncomeInfo" style="color: #0DA0F3;">
          {{ allData.goodsIncomeInfo.totalIncomeCount }}
        </div>
      </div>
      <div class="empty-card blue-card" v-else @mouseenter="blueRight = true" @mouseleave="blueRight = false">
        <div>
          <img src="@/assets/images/alliance/shop.png" class="empty-img" alt="">
          <div class="empty-desc">{{ $t('promote.blue_empty_desc') }}</div>
          <transition name="fade">
            <Icon type="md-arrow-forward" class="right-icon" v-if="blueRight" @click="cusMet('/Product-Commission')"
              color="#FFFFFF" />
          </transition>
        </div>
      </div>
      </Col>
      <Col span="8">
      <div class="card-sty" v-if="yelShowCard" @click="cusMet('/Event-Bonus')">
        <div class="title">
          {{ $t('promote.yel_tit_card') }}
        </div>
        <div class="sub-title sub-head">
          {{ $t('promote.gray_sub_tit_card') }}
          <span class="date-text" v-if="allData && allData.shareIncomeInfo">
            {{ allData.shareIncomeInfo.incomeTimeStr || '' }}
          </span>
        </div>
        <div class="com-num" v-if="allData && allData.shareIncomeInfo" style="color: #F8A54B;">
          {{ allData.shareIncomeInfo.incomeAmount || 0 }}
          <span>{{ userCurrency }}</span>
        </div>
        <div class="sub-title sub-head" style="margin-top: 32px;">
          {{ $t('promote.gray_third_tit_card') }}
        </div>
        <div class="com-num" v-if="allData && allData.shareIncomeInfo" style="color: #F8A54B;">
          {{ allData.shareIncomeInfo.totalIncomeCount }}
        </div>
      </div>
      <div class="empty-card yel-card" v-else @mouseenter="yelRight = true" @mouseleave="yelRight = false">
        <div>
          <img src="@/assets/images/alliance/balloon.png" class="empty-img" alt="">
          <div class="empty-desc">{{ $t('promote.yel_empty_desc') }}</div>
          <transition name="fade">
            <Icon type="md-arrow-forward" class="right-icon" v-if="yelRight" @click="cusMet('/Event-Bonus')"
              color="#FFFFFF" />
          </transition>
        </div>
      </div>
      </Col>
    </Row>
  </div>
</template>
<script>
import { mapState } from "vuex";
import dayjs from "dayjs";
import 'dayjs/locale/en'; // 引入dayjs的英文语言包
import { getHomeInfo } from "@/api/invite";
import barCom from './bar-Com.vue';
export default {
  components: { barCom },
  data() {
    return {
      allData: {},
      defaultRight: false,
      pinkRight: false,
      grayRight: false,
      blueRight: false,
      yelRight: false,
      activeSevDayData: [],
      activeCategoryData: [],
      resignSevDayData: [],
      resignCategoryData: [],
    }
  },
  computed: {
    ...mapState({
      userCurrency: (state) => {
        return state.user.userCurrency.code;
      },
    }),
    defaultShowCard() {
      const { last7DaysInvitesCount, dailyAverageForInvites, last7DaysInvitesList } = this.allData;
      return (last7DaysInvitesCount > 0 || dailyAverageForInvites > 0 || (last7DaysInvitesList && last7DaysInvitesList.length > 0));
    },
    pinkShowCard() {
      const { last7DaysActivatedCount, dailyAverageForActivated, last7DaysActivatedList } = this.allData;
      return (last7DaysActivatedCount > 0 || dailyAverageForActivated > 0 || (last7DaysActivatedList && last7DaysActivatedList.length > 0));
    },
    grayShowCard() {
      const { expressIncomeInfo } = this.allData;
      return (this.allData && expressIncomeInfo && (expressIncomeInfo.incomeTimeStr || expressIncomeInfo.incomeAmount > 0 || expressIncomeInfo.totalIncomeCount > 0));
    },
    blueShowCard() {
      const { goodsIncomeInfo } = this.allData;
      return (this.allData && goodsIncomeInfo && (goodsIncomeInfo.incomeTimeStr || goodsIncomeInfo.incomeAmount > 0 || goodsIncomeInfo.totalIncomeCount > 0));
    },
    yelShowCard() {
      const { shareIncomeInfo } = this.allData;
      return (this.allData && shareIncomeInfo && (shareIncomeInfo.incomeTimeStr || shareIncomeInfo.incomeAmount > 0 || shareIncomeInfo.totalIncomeCount > 0));
    }
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      getHomeInfo().then(res => {
        this.allData = res.result;
        this.compDataShow();
      })
    },
    compDataShow() {
      if (this.allData.last7DaysInvitesList !== null) {
        this.allData.last7DaysInvitesList.forEach((item) => {
          let date = new Date(item.dateTime * 1000);
          let weekDay = date.getDay();
          let weekDayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
          let shortWeekDay = weekDayNames[weekDay].substring(0, 2);
          this.resignCategoryData.push(shortWeekDay);
          // 根据item.num的值显示不同柱体颜色
          let color = item.num > 0 ? '#0DA0F3' : '#EBEFF4';
          let newItem = {
            value: item.num,
            itemStyle: {
              color: color
            }
          };
          this.resignSevDayData.push(newItem);
        });
      } else {
        // 没值的情况
        dayjs.locale('en'); // 设置dayjs为英文环境
        const today = dayjs();
        for (let i = 0; i < 7; i++) {
          const day = today.subtract(i, 'day');
          const weekDay = day.format('ddd').substring(0, 2);
          this.resignCategoryData.push(weekDay);
        }
        // 反转数组，使得顺序是从前往后（过去到现在）
        this.resignCategoryData.reverse();
        let dataArr = [0, 0, 0, 0, 0, 0, 0];
        dataArr.forEach((item) => {
          // 根据item.num的值显示不同柱体颜色
          let color = item > 0 ? '#0DA0F3' : '#EBEFF4';
          let newItem = {
            value: item,
            itemStyle: {
              color: color
            }
          };
          this.resignSevDayData.push(newItem);
        })
      }


      if (this.allData.last7DaysInvitesList !== null) {
        this.allData.last7DaysInvitesList.forEach((item) => {
          let date = new Date(item.dateTime * 1000);
          let weekDay = date.getDay();
          let weekDayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
          let shortWeekDay = weekDayNames[weekDay].substring(0, 2);
          this.activeCategoryData.push(shortWeekDay);
          // 根据item.num的值显示不同柱体颜色
          let color = item.num > 0 ? '#FF6490' : '#EBEFF4';
          let newItem = {
            value: item.num,
            itemStyle: {
              color: color
            }
          };
          this.activeSevDayData.push(newItem);
        });
      } else {
        // 没值的情况
        dayjs.locale('en'); // 设置dayjs为英文环境
        const today = dayjs();
        for (let i = 0; i < 7; i++) {
          const day = today.subtract(i, 'day');
          const weekDay = day.format('ddd').substring(0, 2);
          this.activeCategoryData.push(weekDay);
        }
        // 反转数组，使得顺序是从前往后（过去到现在）
        this.activeCategoryData.reverse();
        let dataArr = [0, 0, 0, 0, 0, 0, 0];
        dataArr.forEach((item) => {
          // 根据item.num的值显示不同柱体颜色
          let color = item > 0 ? '#0DA0F3' : '#EBEFF4';
          let newItem = {
            value: item,
            itemStyle: {
              color: color
            }
          };
          this.activeSevDayData.push(newItem);
        })
      }
    },
    wdMet() {
      this.$router.push(`/user/withdraw?type=commission`)
    },
    cusMet(path) {
      this.$router.push(path);
    }
  }
}
</script>
<style lang="less" scoped>
.card-sty:hover {
  box-shadow: 0px 1px 17px 0px rgba(0, 1, 50, 0.08);
  transform: translateY(-10px);
  transition: .5s;
}

.card-sty {
  min-height: 386px;
  max-height: 386px;
  padding: 32px 40px;
  background: #FFFFFF;
  border-radius: 16px 16px 16px 16px;
  border: 1px solid #E8E8E8;
  margin-top: 32px;
  cursor: pointer;

  .title {
    // text-wrap: nowrap;
    font-family: Open Sans, Open Sans;
    font-weight: 600;
    font-size: 22px;
    color: #1E1714;
    line-height: 26px;
    margin-bottom: 36px;
    margin-top: 8px;

    .invite-num {
      font-family: Open Sans, Open Sans;
      font-weight: 600;
      font-size: 32px;
      color: #0DA0F3;
      line-height: 38px;
    }

    .active-num {
      font-family: Open Sans, Open Sans;
      font-weight: 600;
      font-size: 32px;
      color: #FF6490;
      line-height: 38px;
    }
  }

  .head-title {
    width: 100%;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
  }

  .sub-title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 20px;
    color: #767B93;
    line-height: 23px;
    margin-bottom: 5px;

    .tip-icon {
      cursor: pointer;
    }
  }

  .sub-head {
    width: 100%;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
  }

  .balance-num {
    font-family: Open Sans, Open Sans;
    font-weight: bold;
    font-size: 36px;
    color: #FF186B;
    line-height: 42px;
    margin-bottom: 18px;

    span {
      font-size: 20px;
      line-height: 23px;
      margin-left: 8px;
    }
  }

  .un-wd-num {
    font-family: Open Sans, Open Sans;
    font-weight: bold;
    font-size: 22px;
    color: #1E1714;
    line-height: 26px;

    span {
      font-size: 16px;
      line-height: 19px;
    }
  }

  .bar-area {
    width: 100%;
    height: 150px;
  }

  .bd-sty {
    margin-top: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #EBEFF4;
  }

  .com-num {
    font-family: Open Sans, Open Sans;
    font-weight: bold;
    font-size: 48px;
    color: #32CB9D;
    line-height: 56px;
    text-wrap: nowrap;
    margin-top: 9px;

    span {
      font-size: 23px;
      line-height: 27px;
    }
  }

  .wd-btn {
    padding: 13px 0;
    background: #FF186B;
    border-radius: 8px 8px 8px 8px;
    text-wrap: nowrap;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 20px;
    color: #FFFFFF;
    line-height: 23px;
    text-align: center;
    margin-top: 32px;
    cursor: pointer;
  }
}

.empty-card:hover {
  box-shadow: 0px 1px 17px 0px rgba(0, 1, 50, 0.08);
  transform: translateY(-10px);
  transition: .5s;
}

.empty-card {
  min-height: 386px;
  padding: 32px 40px;
  background: #3C61FF;
  border-radius: 16px 16px 16px 16px;
  margin-top: 32px;
  display: flex;
  justify-content: center;
  align-items: center;

  .empty-img {
    width: 110px;
    height: 110px;
    display: block;
    margin: 0 auto;
  }

  .empty-desc {
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 18px;
    color: #FFFFFF;
    line-height: 21px;
    margin-top: 24px;
    text-align: center;
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }

  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }

  .fade-enter-to,
  .fade-leave {
    opacity: 1;
  }

  .right-icon {
    font-size: 34px;
    display: block;
    margin: 0 auto;
    margin-top: 38px;
    cursor: pointer;
  }
}

.pink-card {
  background: #FF6490;
}

.gray-card {
  background: #32CB9D;
}

.blue-card {
  background: #0DA0F3;
}

.yel-card {
  background: #F79831;
}
</style>
